<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/vue.js"></script>
    <title>一个重要的内置关系</title>
    <style>
        
    </style>
</head>
<body>
    <div id="root">
        <!-- 
        1.一个重要的内置关系:VueComponent.prototype.__proto__ === Vue.prototype
        2.为什么要有这个关系:让组件实例对象(vc)可以访问到Vue原型上的属性、方法
        -->
        <!-- 第三步 使用组件 -->
        <school></school>
    </div>
</body>
<script>
    //创建一个构造函数
    /* function Demo() {
        this.a = 1;
        this.b = 2;
    }

    //创建一个Demo的实例对象
    const  d = new Demo();

    //显示原型属性
    console.log(Demo.prototype);
    //隐式原型属性
    console.log(d.__proto__);
    //判断显示原型属性和隐式原型属性是否一致
    console.log(Demo.prototype === d.__proto__);

    
    //程序员通过显示原型属性来操作原型对象，追加一个x属性，并赋值为99
    Demo.prototype.x = 99;
    console.log(d);
    console.log(d.x);  */
   //第一步 创建组件
   Vue.prototype.x = 99; 
    const school = Vue.extend({
        template: `
            <div>
                <h1>学校名称:{{schoolName}}</h1>
                <h1>学校地址:{{address}}</h1>
                <button @click="showSchoolName">点我显示学校名称</button>
            </div>`,
        data() {
            return {
                schoolName: "尚硅谷",    // 学校名称
                address: "北京市海淀区西二旗"  // 学校地址
            }
        },
        methods: {
            showSchoolName() {
                console.log(this.x);
                alert(this.schoolName);
            }
        }
    });

    var vm = new Vue({
        el: '#root',
        // 第二步，注册组件(局部注册)
        components: {
            "school": school
        }
    })

    // console.log(school.prototype.__proto__ === Vue.prototype); // true
</script>
</html>